<template>
  <!-- 实名认证 -->
  <div class="certification">
    <div class="header">
      <van-nav-bar
        class="h-h"
        title="实名认证"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-image
        round
        width="5rem"
        height="5rem"
        src="http://121.199.29.84/ej-app-employee/static/img/%E5%AE%89%E5%85%A8.51879af4.png"
      />
      <p>进行实名认证</p>
      <p>用于保障账号的安全及快速接受账单的信息</p>
    </div>
    <div class="context">
      <van-form @submit="onSubmit">
        <van-field
          v-model="value1"
          name="pattern"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ pattern, message: '请输入真实姓名' }]"
        />
        <van-field
          v-model="value1"
          name="pattern"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ pattern, message: '请输入身份证号' }]"
        />
        <van-field
          v-model="value1"
          name="pattern"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{ pattern, message: '请输入银行卡号' }]"
        />
        <van-field name="uploader" label="身份证正面照">
          <template #input>
            <van-uploader v-model="uploader1" />
          </template>
        </van-field>
        <van-field name="uploader" label="身份证反面照">
          <template #input>
            <van-uploader v-model="uploader2" />
          </template>
        </van-field>
        <van-field name="uploader" label="银行卡照片">
          <template #input>
            <van-uploader v-model="uploader3" />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploader1: [],
      uploader2: [],
      uploader3: [],
      pattern: /\d{6}/,
    };
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.h-h {
  height: 58px;

  background-image: linear-gradient(90deg, #a1c4fd, #7cabf7);
  text-align: center;
  line-height: 58px;
  color: #fff !important;
  margin-bottom: 10px;
}

::v-deep .van-nav-bar__title {
  color: white;
  font-size: 1.2rem;
}
::v-deep .van-icon {
  color: white;
  font-size: 1.5rem;
}
.header {
  text-align: center;
}
</style>